===== index.html =============================================
The React Lecture
Welcome to the React funtimes
===== src/main.tsx ===========================================
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Bad');
const reactRoot = createRoot(rootElement);
/*
// First version
reactRoot.render(
React.createElement('ol', {}, [
React.createElement('li', {}, 'First'),
React.createElement('li', {}, 'Second'),
]),
);
*/
/*
// Second version
function doRender(x: number | null) {
reactRoot.render(
{x && - {x}
}
- First
- Second
,
);
}
doRender(null);
globalThis.doRender = doRender;
*/
reactRoot.render();
===== src/App.tsx ============================================
import { FormEvent, useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
const [response, setResponse] = useState(null);
const [waiting, setWaiting] = useState(false);
const handleClicked = async (e: FormEvent) => {
e.preventDefault();
//alert('clicked!');
setCount(count + 1);
setWaiting(true);
const response = await fetch(
'https://robsimmons-nameseeingserver.web.val.run',
{
method: 'POST',
body: JSON.stringify({ key: 'abracadabra', name }),
},
);
const { message } = await response.json();
setWaiting(false);
setResponse(message);
};
return (
);
}